<template>
	<view class="container">
		<view class="header">
			<text class="title">线上活动规则</text>
			<text class="subtitle">了解活动详情和参与方式</text>
		</view>
		
		<view class="rules-content">
			<view class="rule-section">
				<text class="section-title">活动时间</text>
				<text class="section-content">
					活动时间：2024年10月1日 - 2024年12月31日
					每日活动时间：00:00 - 23:59
				</text>
			</view>
			
			<view class="rule-section">
				<text class="section-title">参与方式</text>
				<text class="section-content">
					1. 用户每日完成指定步数目标即可参与活动
					2. 步数目标：每日8000步
					3. 完成步数后可在小程序内进行抽奖
					4. 每日限抽奖1次
				</text>
			</view>
			
			<view class="rule-section">
				<text class="section-title">奖品设置</text>
				<text class="section-content">
					一等奖：100元现金红包（中奖率1%）
					二等奖：50元现金红包（中奖率5%）
					三等奖：20元现金红包（中奖率10%）
					四等奖：10元现金红包（中奖率20%）
					五等奖：5元现金红包（中奖率30%）
					谢谢参与：无奖品（中奖率34%）
				</text>
			</view>
			
			<view class="rule-section">
				<text class="section-title">兑奖规则</text>
				<text class="section-content">
					1. 中奖后奖品将自动发放到用户账户
					2. 现金红包可直接提现到微信零钱
					3. 奖品有效期为30天，过期作废
					4. 每个用户每日最多中奖1次
				</text>
			</view>
			
			<view class="rule-section">
				<text class="section-title">注意事项</text>
				<text class="section-content">
					1. 步数数据以微信运动为准
					2. 禁止使用外挂或作弊行为
					3. 活动最终解释权归主办方所有
					4. 如有疑问请联系客服
				</text>
			</view>
			
			<view class="rule-section">
				<text class="section-title">联系方式</text>
				<text class="section-content">
					客服电话：400-123-4567
					客服微信：ticai_service
					服务时间：09:00-18:00
				</text>
			</view>
		</view>
		
		<view class="contact-actions">
			<button class="contact-btn" @click="callService">联系客服</button>
			<button class="contact-btn" @click="shareActivity">分享活动</button>
		</view>
		
		<!-- 设计图参考 -->
		<view class="design-reference">
			<text class="reference-title">设计参考图</text>
			<image class="design-image" :src="getImageUrl('体彩小程序文件夹(_F)/JPG/1021-08.jpg')" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
import { getImageUrl } from '@/api/config'

export default {
	methods: {
		getImageUrl,
		callService() {
			uni.makePhoneCall({
				phoneNumber: '400-123-4567'
			})
		},
		shareActivity() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: '体彩爱行走乐分享',
				summary: '每日行走，健康生活，还有机会赢取现金红包！',
				success: () => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.header {
	text-align: center;
	padding: 30rpx 20rpx;
	background: white;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
}

.rules-content {
	padding: 20rpx;
}

.rule-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 20rpx;
}

.section-content {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	white-space: pre-line;
}

.contact-actions {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
}

.contact-btn {
	flex: 1;
	height: 80rpx;
	background: #4A90E2;
	color: white;
	border: none;
	border-radius: 40rpx;
	font-size: 28rpx;
}

.design-reference {
	background: rgba(255,255,255,0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
}

.reference-title {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 20rpx;
}

.design-image {
	width: 100%;
	max-height: 400rpx;
	border-radius: 10rpx;
}
</style>
